import React from 'react';
import {ScrollView, View,Dimensions,TouchableOpacity,Text,findNodeHandle,UIManager} from 'react-native';

const {width,height} = Dimensions.get('window')

/**
 * ScrollView 滑动时，吸顶效果
 */
export default class OnScrollDemo extends React.Component{

  componentDidMount(){
    const handle = findNodeHandle(this.refs);

    setTimeout(()=>{
      UIManager.measure(handle, (x, y, width, height, pageX, pageY) => {
        this.refsY = y;
      });
    },1000);

  }

  render(){
    return(
      <ScrollView
        scrollEventThrottle={1}
      onScroll={(e)=>{
        const offsetY= e.nativeEvent.contentOffset.y
        console.log('offsetY',offsetY)
        console.log('this.refsY',this.refsY)
        if(offsetY-this.refsY>0){
          this.refs.setNativeProps({
            position:'absolute',
            top:offsetY,
          })
        }else {
          this.refs.setNativeProps({
            position:'absolute',
            top:300,
          })
        }
      }}>
        <View style={{backgroundColor:'red',alignItems:'center',justifyContent:'center',
          width:width,height:100}}>
          <Text>第一个View</Text>
        </View>



        <View style={{backgroundColor:'red',alignItems:'center',justifyContent:'center',
          width:width,height:2000}}>
          <Text>第二个View</Text>
        </View>

        <View
          style={{position:'absolute',
            top:300,}}
          ref={(ref)=>this.refs = ref}>
          <TouchableOpacity
            onPress={()=>{
              alert('可以点击')
            }}
            style={{width:100,height:50,backgroundColor:'blue'}}>
            <Text>可以移动点击的按钮</Text>
          </TouchableOpacity>
        </View>

      </ScrollView>
    )
  }
}
